<pfng-notification-drawer
    [allowExpand]="true"
    [hidden]="!showNotifications"
    [notificationGroups]="notificationList"
    [title]="'Your Notifications'"
    [notificationBodyTemplate]="notificationBodyTemplate"
    [notificationFooterTemplate]="notificationFooter"
    [subHeadingTemplate]="subHeading"
    [singleGroup]="true"
    (close)="close($event)"
>
</pfng-notification-drawer>

<ng-template #notificationBodyTemplate let-notify="notify" let-index="index">
    <div class="pull-right">
        <pfng-action
            *ngIf="notify.moreActions"
            class="list-pf-actions"
            [config]="notify.moreActions"
            (onActionSelect)="handleAction($event, notify)"
        ></pfng-action>
    </div>

    <span class="pull-left pficon fa fa-plus-square" *ngIf="notify.type === 'notify_content_release'"></span>
    <span class="pull-left pficon fa fa-plus-square" *ngIf="notify.type === 'notify_author_release'"></span>
    <span class="pull-left pficon pficon-ok" *ngIf="notify.type === 'notify_import_success'"></span>
    <span class="pull-left pficon fa fa-star" *ngIf="notify.type === 'notify_survey'"></span>
    <span class="pull-left pficon pficon-warning-triangle-o" *ngIf="notify.type === 'notify_import_fail'"></span>

    <div class="drawer-pf-notification-content" (click)="markAsRead(notify)">
        <span class="drawer-pf-notification-message">
        {{notify.message}}
        </span>
        <div class="drawer-pf-notification-info">
            <span class="date">{{notify.timeStamp | date:'MM/dd/yyyy'}}</span>
            <span class="time">{{notify.timeStamp | date:'h:mm:ss a'}}</span>
        </div>
    </div>
</ng-template>

<ng-template #notificationFooter>
    <div class="drawer-pf-action" *ngIf="totalNotifications > loadedNotifications">
        <span class="drawer-pf-action-link">
            <button class="btn btn-link" (click)="loadMore()">
                Load More
            </button>
        </span>
    </div>

    <div class="drawer-pf-action" *ngIf="loadedNotifications > 0">
        <span class="drawer-pf-action-link">
            <button class="btn btn-link" (click)="markAllAsRead()">Mark All Read</button>
        </span>
        <span class="drawer-pf-action-link">
            <button class="btn btn-link" (click)="deleteAll()">
                <span class="pficon pficon-close"></span>
                Clear All
            </button>
        </span>
    </div>
</ng-template>

<ng-template #subHeading>
    Showing {{loadedNotifications}} out of {{totalNotifications}} - Unread: {{unreadCount}}
</ng-template>
